<template>
	<div >
		<Transition name="fade" mode="out-in">
			<div v-if="!isShowTable"  class="container">
				<el-card shadow="hover"
					v-for="item in cardData"
					:key="item.title"
					class="card-item"
					:body-style="{
						display: 'flex',
						flexDirection: 'column',
						justifyContent: 'space-around',
						height: '100%'
					}"
					@click="handleCardType(item.title,item.id)">
					<SvgIcon :name="item.imgUrl" color="#000" size="50" style="text-align: center;"></SvgIcon>
					<p style="text-align: center; font-size: 18px;">{{ item.title }}</p>
					<span style="text-align: center;">{{ item.description }}</span>
				</el-card>
			</div>
			<div v-else>
				<div v-if="curSeleted==='证书拷贝'" class="mb10">
					<SvgIcon  name="ele-WarningFilled" class="color-warning mr5 font20" style="vertical-align: middle;"/>
					<span>{user}为目标主机用户名，{host}为目标主机IP地址或域名</span>
				</div>
				<div v-if="curSeleted==='存储卷挂载'" class="mb10">
					<SvgIcon  name="ele-WarningFilled" class="color-warning mr5 font20" style="vertical-align: middle;"/>
					<span>{devPath}是执行rbd map命令之后的盘符</span>
				</div>
				<div v-if="curSeleted==='文件系统大小调整'" class="mb10">
					<SvgIcon  name="ele-WarningFilled" class="color-warning mr5 font20" style="vertical-align: middle;"/>
					<span>resize2fs 命令支持的单位是B、KB、MB、GB 和 TB，不支持小数单位。如需精确调整请选择合适的单位</span>
					<div>
						<SvgIcon  name="ele-WarningFilled" class="color-warning mr5 font20" style="vertical-align: middle;"/>
						<span>存储卷实际可设置的最小容量与执行resize2fs命令计算出的最小文件系统容量有关</span>
					</div>
					<div>
						<SvgIcon  name="ele-WarningFilled" class="color-warning mr5 font20" style="vertical-align: middle;"/>
						<span>{devPath}是执行rbd map命令之后的盘符,{size}是调整后的文件系统容量</span>
					</div>
				</div>
				<el-table  :data="tableData" border class="step-table">
					<el-table-column prop="step" label="步骤" :width="colWidthMap[curSeletedId].step" />
					<el-table-column prop="operate" label="操作" :width="colWidthMap[curSeletedId].operate" />
					<el-table-column prop="example">
						<template #header>
							<div class="table-title">
								<span>示例</span>
								<el-icon size="20" color="#000" @click="closeTable"><ele-Close /></el-icon>
							</div>
						</template>
						<template #default="{row}">
							<el-button type="primary" v-if="row.example === 'download'" @click="downloadKey">下载</el-button>
							<span v-else :class="{'commond-lines':row.example.startsWith('#')}">{{ row.example }}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</Transition>
	</div>
</template>
<script lang="ts" setup>
import { ref, toRefs } from 'vue';
import { StepTableItem } from './guideData';
import guideData from './guideData';
import { useBlockStorageApi } from '/@/api/block-storage/index';
import { MD5 } from '/@/utils/other';
import { ElMessage } from 'element-plus';

const props = withDefaults(
	defineProps<{
		data:any
	}>(),
	{
		data: null
	}
);
const { data: curRow } = toRefs(props);
const isShowTable = ref(false);
const cardData = ref([
	{
		id: 'credentialCopy',
		imgUrl: 'iconfont icon-key',
		title: '证书拷贝',
		description: '将存储集群证书下载到本机并拷贝到客户机'
	},
	{
		id: 'volumeMount',
		imgUrl: 'iconfont icon-block-storage',
		title: '存储卷挂载',
		description: '在客户机挂载存储卷'
	},
	{
		id: 'volumeUnmount',
		imgUrl: 'iconfont icon-line-uninstall',
		title: '存储卷卸载',
		description: '在客户机卸载存储卷'
	},
	{
		id: 'sizeChange',
		imgUrl: 'iconfont icon-resize',
		title: '文件系统大小调整',
		description: '对文件系统大小进行调整'
	}
]);
const colWidthMap:{
	[key: string]:any
} = {
	'credentialCopy': {
		step: 200,
		operate: 270
	},
	'volumeMount': {
		step: 150,
		operate: 350
	},
	'volumeUnmount': {
		step: 200,
		operate: 300
	},
	'sizeChange': {
		step: 250,
		operate: 300
	},
};
const tableData = ref<StepTableItem[]>([]);

// base props.data handle table example
const handleExample = () => {
	for (const item of tableData.value) {
		item.example = item.example.replace(/pool1\/rbd0/g, `${curRow.value.poolName}/${curRow.value.rbdName}`);
		item.example = item.example.replace(/mnt\/rbd0/g, `mnt/${curRow.value.poolName}/${curRow.value.rbdName}`);
		item.example = item.example.replace(/\/dev\/rbd0/g, `{devPath}`);
	}
};

// set step table
const setStepTableData = () => {
	tableData.value = [];
	switch (curSeleted.value) {
		case '证书拷贝':
			// tableData.value = [...guideData.certificate];
			tableData.value = JSON.parse(JSON.stringify(guideData.certificate));
			break;
		case '存储卷挂载':
			// tableData.value = [...guideData.volumeMount];
			tableData.value = JSON.parse(JSON.stringify(guideData.volumeMount));
			break;
		case '存储卷卸载':
			// tableData.value = [...guideData.volumeUninstall];
			tableData.value = JSON.parse(JSON.stringify(guideData.volumeUninstall));
			break;
		case '文件系统大小调整':
			// tableData.value = [...guideData.fileSystemResize];
			tableData.value = JSON.parse(JSON.stringify(guideData.fileSystemResize));
			break;
	}
	handleExample();
};
const curSeleted = ref();
const curSeletedId = ref();
const handleCardType = (cardTitle:string, id:string) => {
	curSeleted.value = cardTitle;
	curSeletedId.value = id;
	setStepTableData();
	isShowTable.value = true;
};

// downloadKey
const downloadKey = () => {
	useBlockStorageApi().downloadKey().then((res:any) => {
		let blob = new Blob([_base64ToArrayBuffer(res.data['ceph.client.admin.keyring'])]);
		let md5 = res.data.md5;
		// check md5
		MD5(blob).then(res => {
			if (res === md5) {
				let url = window.URL.createObjectURL(blob);
				let a = document.createElement('a');
				a.href = url;
				a.download = 'ceph.client.admin.keyring';
				a.click();
			} else {
				ElMessage.error('文件MD5异常');
			}
		});
	});
};
// return arrayBuffer
const _base64ToArrayBuffer = (base64:string) => {
	var binary_string = window.atob(base64);
	var len = binary_string.length;
	var bytes = new Uint8Array(len);
	for (var i = 0; i < len; i++) {
		bytes[i] = binary_string.charCodeAt(i);
	}
	return bytes.buffer;
};

const closeTable = () => {
	isShowTable.value = false;
};

</script>
<style scoped lang="scss">
.container{
	display: flex;
	justify-content: space-between;
}
.card-item{
	width:200px;
	height:300px;
	cursor: pointer;
}
.step-table{
	// position: absolute;
	// width: 960px;
	height: 300px;
	.table-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		i{
			cursor: pointer;
		}
	}
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>